<template>
  <div class="app-container">

    <el-row :gutter="25">
      <!--部门数据-->
      <el-col :span="5" :xs="24">
        <div class="head-container">
          <el-input
            v-model="categoryName"
            placeholder="请输入问卷调查名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="categoryOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="19">
        <el-container>
          <el-header style="color: red">
            {{data.title}}
          </el-header>
          <el-main>
            <div style="margin: 10px 90px">
              <el-row>
                <el-col :span="24">
                  <el-card shadow="hover" v-for="(question,questionIndex) in data.questionAnswerUserOutputs" :key="question.id" style="margin-bottom:20px">

                    <div slot="header" class="clearfix">
                      <el-tag type="warning" effect="dark" style="margin: 0 10px"> {{ questionTypeText(question.questionType) }}</el-tag>
                      <span>{{question.questionName}}</span>
                    </div>
                    <!--问答题-->
                    <div v-if="question.questionType == 1">
                      <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="selectedAnswers[questionIndex]">
                      </el-input>
                    </div>
                    <!--单选-->
                    <div  v-if="question.questionType == 2">
                      <el-radio-group v-model="selectedAnswers[questionIndex]">
                        <el-radio
                          v-for="(option, optionIndex) in question.questionAnswerList"
                          :key="option.id"
                          :label="option.questionSelect"
                        >
                          {{ option.questionSelect }} : {{ option.questionAnswer }}
                        </el-radio>
                      </el-radio-group>
                    </div>
                    <!--多选-->
                    <div v-if="question.questionType == 3">
                      <el-checkbox-group v-model="question.multipleOptions">
                        <el-checkbox  v-for="(option, optionIndex) in question.questionAnswerList"
                                      :key="option.id"
                                      :label="option.questionSelect">
                          {{ option.questionAnswer }}
                        </el-checkbox>
                      </el-checkbox-group>
<!--                      <el-checkbox-group-->
<!--                        v-model="checkedCities"-->
<!--                        :min="1"-->
<!--                        :max="2">-->
<!--                        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>-->
<!--                      </el-checkbox-group>-->
                    </div>
                    <!--判断-->
                    <div v-if="question.questionType == 4">
                      <el-radio-group  v-model="selectedAnswers[questionIndex]">
                        <el-radio :label="1"> √ </el-radio>
                        <el-radio :label="0"> × </el-radio>
                      </el-radio-group>
                    </div>
                    <!--评分-->
                    <div v-if="question.questionType == 5">
                      <el-rate show-text v-model="selectedAnswers[questionIndex]"></el-rate>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <el-button type="success" style="float: right" @click="submit">提交</el-button>
          </el-main>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { treeselect, queryForUser } from '@/api/question/scenario'

export default {
  name: 'Scenario',
  data() {
    return {
      // 问卷调查名称
      categoryName: undefined,
      selectedAnswers: [], // 存储每个问题的选中答案
      // 问卷调查树选项
      categoryOptions: undefined,
      data: [],
      // 显示搜索条件
      showSearch: true,
      defaultProps: {
        children: 'childList',
        label: 'title'
      },
      queryParams: {
        id: 4,
        phoneNumber: null
      },
      multipleOptions: [],
      multipleOption: {
        answer: [
          {
            id:"",
            answers:[]
          }
        ]
      },
    }
  },
  created() {
    this.getTreeselect()
    this.getQueryForUser()
  },
  watch: {
    // 根据名称筛选部门树
    categoryName(val) {
      this.$refs.tree.filter(val)
    }
  },
  computed: {

  },
  methods: {
    handleCheckedCitiesChange(value) {
      alert(value)
    },
    // 提交问卷
    submit(){
      console.log(this.selectedAnswers)
      console.log(this.data)

      this.data.questionAnswerUserOutputs.forEach((question, questionIndex) => {
        if (question.questionType == 3) {
          console.log(question.multipleOptions)
        }
      })

    },
    // 计算属性，用于将questionType转换为对应的文本描述
    questionTypeText(type) {
      switch (type) {
        case "1":
          return '问答题';
        case "2":
          return '单选';
        case "3":
          return '多选';
        case "4":
          return '判断';
        case "5":
          return '评分（打星）';
        default:
          return '未知类型';
      }
    },
    getQueryForUser(){
      queryForUser(this.queryParams).then(response => {
        // 判断是否满足参与条件
        if(response.data.result){ // 满足
          this.data = response.data
          this.data.questionAnswerUserOutputs.forEach((question, questionIndex) => {
            if (question.questionType == 3) {
              this.data.questionAnswerUserOutputs[questionIndex].multipleOptions = []
            }
          })
        }else{ // 不满足直接跳转到配置url
          this.$router.push(response.data.url)
        }
        console.log(this.data)
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.title.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (data.id != 1) {
        this.queryParams.id = data.id
      } else {
        this.queryParams.id = null
      }
    },
    /** 查询业务场景下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.categoryOptions = response.data
      })
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.title,
        children: node.childList
      }
    }

  }
}
</script>

<style>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: left;
  line-height: 40px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

</style>
